<?php
require_once 'common.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Online PC</title>
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <link rel="stylesheet" href="css/jquery-ui-1.8.11.custom.css" type="text/css" />

        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>

        <script type="text/javascript" src="js/hint.js"></script>
        <script type="text/javascript" src="js/menu-collapsed.js"></script>

        <script type="text/javascript" src="js/common.js"></script>
        
    </head>
    <body style="background: transparent url(images/background_inside.png) no-repeat center top;">
        <table cellspacing="0" cellpadding="0" border="0" width="900" style="margin-left: auto; margin-right: auto;">
            <tr>
                <td valign="middle" style="height: 130px;">
                    <?php banner(); ?>
                </td>
            </tr>
            
            <tr>
                <td valign="middle" style="height: 52px;">
                    <?php login(); ?>
                </td>
            </tr>
            <tr><td style="height: 50px;"></td></tr>
            <tr>
                <td valign="top" style="height: 500px;">
                    <form method="post">
                    <table cellspacing="0" cellpadding="0" border="0" width="100%">
                        <tr>
                            <td valign="top">
                                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                    <tr>
                                        <td style="border-bottom: 1px solid #f0f0f0; height: 27px;" valign="top"><h3 style="margin: 0px;">Change Password</h3></td>
                                    </tr>
                                    <tr>
                                        <td valign="top">
                                            <table cellspacing="3" cellpadding="0" border="0" width="500" id="table2" align="center">
                                                <tr>
                                                    <td colspan="3" height="50"><span id="msg"></span></td>
                                                </tr>
                                                <tr>
                                                    <td valign="top">
                                                        <fieldset class="legend">
                                                            <legend style="width: 130px;">Change Password</legend>
                                                            <table cellspacing="3" cellpadding="5" border="0" align="center">
                                                                <tr>
                                                                    <td class="pd" colspan="3"><b>Old Password:</b><br/>
                                                                        <input type="password" class="rounded_corner" id="txtoldPassword" name="txtoldPassword" style="width: 300px;" /> <font color="#ff0000">*</font> </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="pd" colspan="3"><b>New Password:</b><br/>
                                                                    <input type="password" class="rounded_corner" id="txtnewPassword" name="txtnewPassword" style="width: 300px;" /> <font color="#ff0000">*</font> </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="pd" colspan="3"><b>Confirm Password:</b><br/>
                                                                    <input type="password" class="rounded_corner" id="txtconfirmPassword" name="txtconfirmPassword" style="width: 300px;" /> <font color="#ff0000">*</font> </td>
                                                                </tr>
                                                            </table>
                                                        </fieldset>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="pd" style="padding-right: 95px; text-align: right;"><input type="button" class="rounded_corner" id="btnChange" value="Change" /></td>
                                                </tr>
                                                <tr><td height="30"></td></tr>
                                            </table>
                                        
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr><td style="height: 10px;"></td></tr>
                    </table>
                    </form>
                </td>
            </tr>
            <tr>
                <td>

                </td>
            </tr>
        </table
        <?php footer() ?>
    </body>
</html>
<script type="text/javascript">
    $(document).ready(function(){
        $('#txtoldPassword').val('');
        $('#btnChange').click(function(){
            var oldPassword     = $('#txtoldPassword').val();
            var newPassword     = $('#txtnewPassword').val();
            var confirmPassword = $('#txtconfirmPassword').val();

            if(oldPassword == '' || newPassword == '' || confirmPassword == ''){

                $('#msg').html('<div class="error_msg"><p>All fields are required!</p></div>');

            }else if(newPassword != confirmPassword){

                $('#msg').html('<div class="error_msg"><p>New Password and Confirm Password did\'t not match!</p></div>');
                $('html, body').animate({scrollTop:0}, 'slow');

            }else{
                $.post("library/ajaxsubmit.php",{
                    form: 'profile_password',
                    txtoldPassword: oldPassword,
                    txtnewPassword: newPassword

                },function(data){
                    
                    var result  = data;
                    var arr     = result.split('~');
                    if(arr[1]=='success'){
                        $('#msg').html('<div class="success_msg"><p>'+arr[0]+'</p></div>');
                        $(':input')
                         .not(':button, :submit, :reset, :hidden')
                         .val('');
                    }else if(arr[1]=='oldpassword'){
                        $('#msg').html('<div class="error_msg"><p>'+arr[0]+'</p></div>');
                    }else{
                        $('#msg').html('<div class="error_msg"><p>Try again later.</p></div>');
                    }

                    $('html, body').animate({scrollTop:0}, 'slow');
                });

            }
        })
    });
</script>
